<template>
	<div id='use-qu-money' @click='useIntegral'> 
		<span style='font-weight:600;'>使用趣币</span>
		<span class='integral'>抵扣{{money}}元</span>
		<span :class="{'radio':true,'radio-yes':useQuOff,'radio-no':!useQuOff}"></span>
	</div>
</template>

<script>
	export default {
		props:['money'],
		data(){
			return ({
				useQuOff:true
			});
		},
		methods:{
			useIntegral(){
				this.$emit('useIntegral',this.useQuOff=!this.useQuOff);
			}
		}
	}
</script>

<style scoped>
	#use-qu-money{
		position: relative;
		height:5rem;
		background: white;
		text-indent:1rem;
		line-height: 5rem;
	}
	.integral{
		position: absolute;
		right: 35px;
		font-size: 12px;
		color:#9d9d9d;
	}
	.radio-no{
		background: url('../../../static/img/radio-no.png') no-repeat center;
	}
	.radio-yes{
		background: url('../../../static/img/radio-yes.png') no-repeat 50% 50%;
	}
	.radio{
		display: inline-block;
		float:right;
		width:2.5rem;
		height: 100%;
		background-size: 16px 16px;
	}
	
</style>